<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rang茶商城 | 联系我们</title>
     <!--引用百度地图API-->
     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9FEijeOWGUrd6GcQq1g8ZaPNW683Ns2K"></script>
    <link rel="icon" href="../img/logo1.png">
    <link rel="stylesheet" href="../css/assiocate.css">
</head>
<body>
    <header class="header">
        <div class="navbar clearfloat">
            <div class="navimg left">
                <img src="../img/logo.webp" alt="">
            </div>
            <div class="nav left">
                <ul class="navul">
                    <li>
                        <a href="./index.html">
                            <span>
                                首页
                            </span>
                        </a>
                        <div class="underline"></div>
                    </li>
                    <li>
                        <a href="./about.html">
                            <span>
                                关于
                            </span>
                        </a>
                        <div class="underline"></div>

                    </li>
                    <li>
                        <a href="./Tea.html">
                            <span>
                                茶叶
                            </span>
                        </a>
                        <div class="underline"></div>

                    </li>
                    <li>
                        <a href="./base.html">
                            <span>
                                基地
                            </span>
                        </a>
                        <div class="underline"></div>

                    </li>
                    <li>
                        <a href="./new.html">
                            <span>
                                新闻
                            </span>
                        </a>
                        <div class="underline"></div>

                    </li>
                    <li>
                        <a href="">
                            <span id="thisPage">
                                联系
                            </span>
                        </a>
                        <div class="underline" id="show"></div>

                    </li>
                </ul>
            </div>
            <div class="nav-right right">
                <div>
                    <a href=""><img src="../img/search.png" alt=""></a>
                </div>
                <div>
                    <a href=""><img src="../img/user.png" alt=""></a>
                </div>
                <div>
                    <a href=""><img src="../img/shopping cart.png" alt=""></a>
                </div>
            </div>
        </div>
    </header>
    <!-- 头部结束 -->

    <!-- banner -->
    <div class="banner">
        <img src="../img/assiocatebanner.webp" alt="">
    </div>
    <!-- banner -->

    <!-- title -->
     <div class="assiocate-title">
        <div class="row-qad">
            <span>
                中国历史上有很长的饮茶纪录，已经无法确切地查明到底是在什么年代了，
                但是大致的时代是有说法的。并且也可以找到证据显示，
                确实在世界上的很多地方饮茶的习惯是从中国传过去的。
            </span>
        </div>
     </div>
    <!-- title -->
     <!-- pir -->
      <div class="assiocate-pir">
        <div id="pir">
            <div class="pir-con">
                <div class="qte-warp">
                    <img src="../img/assiocateemail.webp" alt="">
                </div>
                <div class="qte-text">
                    <div>邮箱</div>
                </div>
                <div class="qte-text-text">
                    <span>info@email.com</span>
                </div>
            </div>
            <div class="pir-con">
                <div class="qte-warp">
                    <img src="../img/assiocateemail.webp" alt="">
                </div>
                <div class="qte-text">
                    <div>邮箱</div>
                </div>
                <div class="qte-text-text">
                    <span>info@email.com</span>
                </div>
            </div>
            <div class="pir-con">
                <div class="qte-warp">
                    <img src="../img/assiocateemail.webp" alt="">
                </div>
                <div class="qte-text">
                    <div>邮箱</div>
                </div>
                <div class="qte-text-text">
                    <span>info@email.com</span>
                </div>
            </div>
        </div>
      </div>
     <!-- pir -->

     <div class="big">
        <div class="bigcon">
            <div style="width:1190px;height:400px;border:#ccc solid 1px;font-size:12px" id="map"></div>
            <p style="color:red;font-weight:600">地图生成工具基于百度地图JS api v2.0版本开发，使用请申请密匙。
              <a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">了解如何申请密匙</a>
              <a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申请密匙</a>
            </p>
        </div>
     </div>



    <!-- footer -->
    <footer class="footer">
        <div class="footer-bgc">

            <div class="fu-left">
                <div class="child-left">
                    <div class="left-title-qte">
                        <div class="bigtitle">联系</div>
                        <div class="header-subtitle">Contact</div>
                    </div>
                    <div class="left-title-qte2">

                        <div class="fu-top">
                            <div class="child-top">
                                <span>
                                    关注我们
                                </span>
                            </div>
                        </div>

                        <ul class="footer-ul">
                            <li>
                                <span>
                                    <img src="../img/wechat.png" alt="">
                                </span>
                            </li>
                            <li>
                                <span>
                                    <img src="../img/weibo.png" alt="">
                                </span>
                            </li>
                        </ul>

                    </div>

                    <div class="qty-column">
                        <div class="qty-colum-title">
                            <div>
                                <span>
                                    起飞页自助建站平台
                                </span>
                            </div>
                        </div>
                        <div class="qty-mess">
                            <span>
                                地址：苏州市建外SOHO东区2号楼
                            </span>
                        </div>
                        <div class="qty-mess">
                            <span>
                                邮编：100000
                            </span>
                        </div>
                        <div class="qty-mess">
                            <span>
                                电话：010-69557550
                            </span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="fu-right">
                <div class="child-right">
                    <div class="ma">
                        <div class="ma-img">
                            <img src="../img/wechatma.webp" alt="">
                        </div>
                        <div class="ma-text">
                            <div>
                                <span>
                                    微信
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="ma">
                        <div class="ma-img">
                            <img src="../img/weiboma.webp" alt="">
                        </div>
                        <div class="ma-text">
                            <div>
                                <span>
                                    微博
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-footer">
            <div>
                <span>

                    COPYRIGHT (©) 2019 茶叶类网站 京ICP备41414141414-1号
                </span>
            </div>
        </div>
    </footer>
    <!-- footer -->
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(113.708659,34.755849),15);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"我的备注",title:"我的标记",imageOffset: {width:0,height:3},position:{lat:34.753773,lng:113.708443}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
  </script>
</html>